import 'dart:async';
import 'package:deer/res/colors.dart';
import 'package:deer/res/font.dart';
import 'package:deer/res/styles.dart';
import 'package:deer/util/utils.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:rxdart/rxdart.dart';

class MyTextField extends StatefulWidget {
  const MyTextField(
      {Key key,
      @required this.controller,
      this.textStyle: TextStyles.textDark16,
      this.maxLength: 16,
      this.autoFocus: false,
      this.keyboardType: TextInputType.text,
      this.hintText: '',
      this.focusNode,
      this.isInputPwd: false,
      this.isStartGetCode: false,
      this.getVCode,
      this.config});

  final TextEditingController controller;
  final TextStyle textStyle;
  final int maxLength;
  final bool autoFocus;
  final TextInputType keyboardType;
  final String hintText;
  final FocusNode focusNode;
  final bool isInputPwd;
  final Function getVCode;
  final bool isStartGetCode;
  final KeyboardActionsConfig config;

  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  bool _isShowPwd = false;
  bool _isShowDelete;
  bool _isClick = true;

  /// 倒计时秒数
  final int second = 60;

  /// 当前秒数
  int s;
  StreamSubscription _subscription;

  @override
  void initState() {
    super.initState();
    // 初始化值
    _isShowDelete = widget.controller.text.isEmpty;
    // 监听输入改变
    widget.controller.addListener(() {
      setState(() {
        _isShowDelete = widget.controller.text.isEmpty;
      });
    });

    if (widget.config != null && defaultTargetPlatform == TargetPlatform.iOS) {
      // 因Android平台输入法兼容问题，所以只配置IOS平台
      FormKeyboardActions.setKeyboardActions(context, widget.config);
    }
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.centerRight,
      children: <Widget>[
        TextField(
          controller: widget.controller,
          focusNode: widget.focusNode,
          maxLength: widget.maxLength,
          obscureText: widget.isInputPwd ? !_isShowPwd : false,
          autofocus: widget.autoFocus,
          textInputAction: TextInputAction.done,
          keyboardType: widget.keyboardType,
          style: widget.textStyle,
          // 数字、手机号限制格式为0到9(白名单)，密码限制不包含汉子(黑名单)
          inputFormatters: (widget.keyboardType == TextInputType.number ||
                  widget.keyboardType == TextInputType.phone)
              ? [WhitelistingTextInputFormatter(RegExp("[0-9]"))]
              : [BlacklistingTextInputFormatter(RegExp("[\u4e00-\u9fa5]"))],
          decoration: InputDecoration(
              fillColor: Colors.orange,
              contentPadding: const EdgeInsets.symmetric(vertical: 16),
              hintText: widget.hintText,
              counterText: '',
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colours.app_main, width: 0.7)),
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colours.line, width: 0.7))),
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Offstage(
              offstage: _isShowDelete,
              child: GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  width: 30,
                  height: 30,
                  child: Image.asset(
                    Utils.getImagePath('login/qyg_shop_icon_delete'),
                    width: 12,
                    height: 12,
                  ),
                ),
                onTap: () {
                  setState(() {
                    widget.controller.text = "";
                  });
                },
              ),
            ),
            Offstage(
              offstage: !widget.isInputPwd,
              child: Padding(
                padding: const EdgeInsets.only(left: 0),
                child: GestureDetector(
                  child: Container(
                    alignment: Alignment.center,
                    width: 30,
                    height: 30,
                    child: Image.asset(
                      _isShowPwd
                          ? Utils.getImagePath('login/qyg_shop_icon_display')
                          : Utils.getImagePath('login/qyg_shop_icon_hide'),
                      width: 12,
                      height: 12,
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      _isShowPwd = !_isShowPwd;
                    });
                  },
                ),
              ),
            ),
            Offstage(
              offstage: widget.getVCode == null,
              child: Padding(
                padding: const EdgeInsets.only(left: 15),
                child: Container(
                  height: 24,
                  width: 76,
                  child: FlatButton(
                    onPressed: _isClick
                        ? () {
                            widget.getVCode();
                            if (widget.isStartGetCode == true) {
                              setState(() {
                                s = second;
                                _isClick = false;
                              });
                              _subscription = Observable.periodic(
                                      Duration(seconds: 1), (i) => i)
                                  .take(second)
                                  .listen((i) {
                                setState(() {
                                  s = second - i - 1;
                                  _isClick = s < 1;
                                });
                              });
                            }
                          }
                        : null,
                    padding: const EdgeInsetsDirectional.only(start: 8, end: 8),
                    textColor: Colours.app_main,
                    color: Colors.transparent,
                    disabledTextColor: Colours.text_gray_c,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(1),
                        side: BorderSide(
                            color: _isClick
                                ? Colours.app_main
                                : Colours.text_gray_c,
                            width: 0.8)),
                    child: Text(
                      _isClick ? '获取验证码' : '($s s)',
                      style: TextStyle(fontSize: Font.font_sp12),
                    ),
                  ),
                ),
              ),
            )
          ],
        )
      ],
    );
  }
}
